<template>
  <view class="total">
    <u-sticky bgColor="#fff">
      <u-tabs
        lineHeight="0"
        itemStyle="width: calc((100% - 140rpx) / 3);height: 80rxpx"
        :list="tab_list"
        activeStyle="color:#409EFF;border-bottom:4rpx solid #409EFF;height:76rpx;line-height:76rpx"
        inactiveStyle="color:#999999;border-bottom:4rpx solid #fff;height:76rpx;line-height:76rpx"
        @click="on_tab"
        keyName="name"
      ></u-tabs>
    </u-sticky>

    <u-list @scrolltolower="scrolltolower" showScrollbar lowerThreshold="100">
      <u-list-item>
        <view
          class="card justify-between"
          v-for="item in list"
          :key="item.Id"
          @click="onDetail(item.Id)"
        >
          <view>
            <view class="roomNo">{{ item.RoomNo }}</view>
            <view class="type">{{ item.SceneType }}</view>
          </view>
          <view
            class="status align-center"
            :style="`color: ${
              item.DealWithStatus === '未完成' ? '#FF6C66' : '#409EFF'
            }`"
          >
            {{ item.DealWithStatus }}
          </view>
        </view>
      </u-list-item>
      <u-loadmore
        fontSize="34rpx"
        iconSize="34rpx"
        :status="loadMoreStatus"
        line
      />
    </u-list>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  getWorkOrderList,
  GetWorkOrderList
} from '@/api/server/v2/home-page/work-order'
import { onLoad } from '@dcloudio/uni-app'
import route from '@/utils/route'

type LoadMoreStatus = 'loadmore' | 'loading' | 'nomore'
type TYPE_tab_item = { name: string }

const tab_list = ref<Array<TYPE_tab_item>>([
  {
    name: '全部'
  },
  {
    name: '已完成'
  },
  {
    name: '未完成'
  }
])
const dealWithStatusIndex = ref()
const on_tab = ({ index }: any) => {
  dealWithStatusIndex.value = index
  list.value = []
  params.value.Page = 1
  getList()
}
const list = ref<Item[]>([])
const params = ref<GetWorkOrderList>({
  Page: 1,
  Limit: 10
})
const loadMoreStatus = ref<LoadMoreStatus>('loadmore')
type Item = {
  BsId: string
  BsName: null
  CreationDate: string
  DealWithDate: string
  DealWithStatus: string
  DealerId: null
  DealerName: null
  Id: number
  Note: string
  PushMsgDate: string
  PushMsgStatus: number
  RoomNo: string
  SceneType: string
  WorkType: string
}
type List<T> = {
  Items: T[]
  Count: number
  Page: number
  PageSize: number
  Filters: string
}
// 获取列表
const getList = async function () {
  const Result = (await getWorkOrderList(params.value)) as List<Item>
  const { Items } = Result
  const len = Items.length
  if (len > 0) {
    if (len < 10) {
      Items.forEach((ele: Item) => {
        list.value?.push(ele)
      })
      loadMoreStatus.value = 'nomore'
    } else {
      Items.forEach((ele: Item) => {
        list.value?.push(ele)
      })
    }
  } else {
    loadMoreStatus.value = 'nomore'
  }
  if (dealWithStatusIndex.value === 1)
    list.value = list.value.filter((ele) => ele.DealWithStatus === '已完成')
  else if (dealWithStatusIndex.value === 2)
    list.value = list.value.filter((ele) => ele.DealWithStatus === '未完成')
}
// 查看详情
const onDetail = (id: number) => {
  route.$route_to('/homePages/work-order/detail?id=' + id)
}

const scrolltolower = () => {
  params.value.Page++
  getList()
}

onLoad(async () => {
  getList()
})
</script>

<style lang="scss" scoped>
.total {
  background-color: #f2f3f6 !important;
}
.card {
  box-sizing: border-box;
  background-color: #fff;
  margin: 24rpx 32rpx 0;
  width: 686rpx;
  height: 128rpx;
  padding: 20rpx 48rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  .type {
    margin-top: 10rpx;
    font-size: 24rpx;
  }
  .status {
    font-size: 24rpx;
  }
}
:deep(.u-divider) {
  margin: 0 !important;
  padding: 0 8rpx;
}
</style>
